<template>
	<view>
		<!-- 背景图片(模糊效果) -->
		<view class="topImage">
			<image :src="list.cover"></image>
		</view>

		<!-- 文章详情的内容 -->
		<view class="topicdetaiContent">
			<view class="cover">
				<image :src="list.cover"></image>
				<text>{{list.title}}</text>
			</view>
			<view class="newsToday">
				<text>动态: {{list.news_count}}</text>
				<text>今日: {{list.today_count}}</text>
			</view>
			<view class="desc">{{list.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style lang="scss">
	.topImage {
		height: 350rpx;
		position: relative;

		>image {
			width: 750rpx;
			height: 100%;
			filter: blur(2px);
		}
	}

	.topicdetaiContent {
		position: relative;
		z-index: 10;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		// 小头像
		.cover {
			display: flex;
			align-items: center;

			>image {
				margin-top: -80rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}
		}

		.newsToday {
			margin: 15rpx 0;
			color: #949494;

			>text {
				&:first-of-type {
					margin-right: 20rpx;
				}
			}
		}

		.desc {
			color: #949494;
			font-size: 1.08rem;
			margin-bottom: 20rpx;
		}
	}
</style>
